<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bottom {
        background: red;
      }
      .top {
        /* 设置overflow，top就满足BFC容器的要求，是一个独立的容器，1，2外边距就不会发生重叠了 */
        overflow: hidden;
        background: orange;
      }
      .top p {
        margin-bottom: 20px;
        /* background: yellow; */
      }
      .floor p {
        margin-top: 10px;
        /* background: blue; */
      }
      .float {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <section id="sec">
      <style media="screen">
        * {
          margin: 0;
          padding: 0;
        }
        #sec {
          background: #f00;
          overflow: hidden;
        }
        .child {
          height: 100px;
          margin-top: 10px;
          background: yellow;
        }
      </style>
      <!-- <article class="child"></article> -->
      <div class="top bottom">
        <p>1</p>
      </div>
      <div class="floor">
        <p>2</p>
      </div>
      <div class="float">
        <p>3</p>
      </div>
    </section>
  </body>
</html>
